<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选练习</title>
</head>
<body>
    <form method="post">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

        <br />
        <input type="checkbox" name="items" value="唱">唱 
        <input type="checkbox" name="items" value="跳">跳
        <input type="checkbox" name="items" value="rap">rap 
        <input type="checkbox" name="items" value="篮球">篮球

        <br />
        <input type="button" id="checkedAllBtn" value="全 选">
        <input type="button" id="checkedNoBtn" value="全不选">
        <input type="button" id="checkedRevBtn" value="反 选">
        <input type="button" id="sendBtn" value="提 交">
    </form>
    <img id="myp" src="/images/0.gif" style="display: none;" alt="">
</body>
</html>
<script>

    /*
        全选按钮
            点击按钮后，四个多选框全部选中
    */

    // 获取四个多选框的name
    var items = document.getElementsByName("items");

// 1.#checkedAllBtn ⭐
    // 为id 为checkedAllBtn按钮绑定一个单击响应函数
    var checkedAllBtn = document.getElementById("checkedAllBtn");
    checkedAllBtn.onclick=function(){
        
        // 获取四个多选框的name
        var items = document.getElementsByName("items");

        for(var i=0; i<items.length;i++){

            // 设置四个多选框为选中状态
            items[i].checked=true;
        }
        // 全选/全不选 复选框
        document.getElementById("checkedAllBox").checked=true;
    };

// 2.#checkedNoBtn ⭐
    // 为id 为checkedNoBtn按钮绑定一个单击响应函数
    var checkedNoBtn = document.getElementById("checkedNoBtn");
    checkedNoBtn.onclick=function(){
        // 获取四个多选框的name
        var items = document.getElementsByName("items");

        for(var i=0; i<items.length;i++){
            
            // 取消四个多选框的选中状态
            items[i].checked=false;
        }
        // 全选/全不选 复选框
        document.getElementById("checkedAllBox").checked=false;

        
    };

// 3.#checkedRevBtn ⭐
    // 为id 为checkedRevBtn按钮绑定一个单击响应函数
    var checkedRevBtn = document.getElementById("checkedRevBtn");
    checkedRevBtn.onclick=function(){

        //  将checkedAllBox设置为选中状态
        checkedAllBox.checked = true; 

        // 获取四个多选框的name
        var items = document.getElementsByName("items");
        for(var i=0; i<items.length;i++){
            
            

            /*
                方法一：

            // 判断items 的 checked属性是否为true 如果是改为false，如果不是，则相反
            if(items[i].checked){
                items[i].checked=false;
            }else{
                items[i].checked=true;
            }
            */

            // 判断多选框的状态
            /* 
                方法二：⭐⭐⭐ 妙妙屋
                    取反：
                        如果是true 则赋值为false
                        如果是false 则负值为true
            */
            items[i].checked = (!items[i].checked);

                // 判断四个多选框是否全选
                // 只要有一个没选中，就不是全选
                if(!items[i].checked){
                    // 一旦进入循环，则证明不是全选状态
                    // 将checkedBox设置为 没选中状态
                    checkedAllBox.checked=false;
                    // 一旦进入循环，则已经得出结果，不需要再执行循环
                }
        }
    };

// 4.#sendBtn  ⭐
    // 为id 为sendBtn绑定一个单击响应函数
    var sendBtn = document.getElementById("sendBtn");
    sendBtn.onclick = function(){
        // 定义一个变量，接受选中的内容
        var checkedtrue=[];
        // 获取四个多选框按钮
        var items = document.getElementsByName("items");
        // 遍历四个按钮
        for(var i=0; i<items.length;i++){
            
            // 判断items 的 checked属性是true还是false
            if(items[i].checked == true){
                checkedtrue.push(items[i].value);
            }
        }
        // 判断选中内容是否为空
        if(checkedtrue.length<1){
            alert("您未选中任何项目");
            document.getElementById("myp").style= "display: none;";
        }
        else{
            // 输出选中的多选框
            if(checkedtrue.length > 3){
                alert("鸡你太美！！");
                document.getElementById("myp").style= " ";
                document.getElementById("myp").width=200;

            }else{
                alert(checkedtrue);
                document.getElementById("myp").style= "display: none;";
            }
            
        }
    };

// 5.#checkedAllBox ⭐

    /*
        全选 / 全不选 多选框
            - 当他选中时，其余的也选中
            - 当他未选中，其余的也未选

        在事件的响应函数中，响应函数是给谁绑定的 this 就是谁
    */
    var checkedAllBox = document.getElementById("checkedAllBox");

    checkedAllBox.onclick = function(){

        // alert(this === checkedAllBox);

        // 设置多选框的选中状态
        for(var i=0; i<items.length; i++){
            items[i].checked = this.checked;
        }

        /*
            自研方法：

            if(checkedAllBox.checked){
                checkedAllBtn.onclick();
            }else{
                checkedNoBtn.onclick();
            }
        */
    };


// 6.items

    // 自研方法

    /*
         方法一：
                构造函数   
            局限：items个数修改后会失效❗❗❗
    */
    /*
    创建一个构造函数
    function myChlic(items,fun){
        items.onclick=fun;
    }
    for(var i=0;i<items.length;i++){
        var item1 = myChlic(items[i],function(){
            if(items[0].checked && items[1].checked && items[2].checked && items[3].checked){
                document.getElementById("checkedAllBox").checked=true;
            }else{
                document.getElementById("checkedAllBox").checked=false;
            }
        });
    }
    */

    /*
         方法二：
                直接给每个items定义一个单击响应函数
            局限：items个数修改后会失效 ❗❗❗
    */
    /*
    for(var i=0;i<items.length;i++){
        items[i].onclick = function(){
            if(items[0].checked && items[1].checked && items[2].checked && items[3].checked){
                document.getElementById("checkedAllBox").checked=true;
            }else{
                document.getElementById("checkedAllBox").checked=false;
            }
        }
    }
    */

// 课程方法
    // 为四个多选框分别绑定单击响应函数
    for(var i=0;i<items.length;i++){
        items[i].onclick = function(){

            //  将checkedAllBox设置为选中状态
            checkedAllBox.checked = true; 

            for(var j=0;j<items.length;j++){
                // 判断四个多选框是否全选
                // 只要有一个没选中，就不是全选
                if(!items[j].checked){
                    // 一旦进入循环，则证明不是全选状态
                    // 将checkedBox设置为 没选中状态
                    checkedAllBox.checked=false;

                    // 一旦进入循环，则已经得出结果，不需要再执行循环
                    break;
                }  
            }
        };
    }
</script>